<template>
  <!-- 方案规划导航栏 -->
  <div style="width: 100%;height: 100%;text-align: center;">
 
  <div style="display: block;width: 100%;height: 90%;text-align: center;">
    
    <div style="width: 98%;height: 34%;margin: 1vh auto;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
            
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">氢气供应方案</div>
      </div> 

      <div style="display:inline-flex;width: 60%;height: 40%;margin: 1vh auto;">
        
        <div id="hppDiv1" @click="clickBox('1')" class="disabledBox">

          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/oneToOne.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">单制氢厂-单用氢站</div>  
          </div>
    
        </div>
            
        <div id="hppDiv2" @click="clickBox('2')" class="disabledBox">
          
          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 75px;margin-top: 1vh;" src="../../assets/images/moreToOne.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">多制氢厂-单用氢站</div>  
          </div>
        
        </div>

                
        <div id="hppDiv3" @click="clickBox('3')" class="disabledBox">
          
          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 75px;margin-top: 1vh;" src="../../assets/images/oneToMore.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">单制氢厂-多用氢站</div>   
          </div>
        
        </div>

      </div>


    </div>

    <div style="width: 98%;height: 34%;margin: 1.5vh auto;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
              
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">氢气运输方案</div>
      </div> 

      <div style="display:inline-flex;width: 60%;height: 40%;margin: 1vh auto;">
        
        <div id="htsDiv1" @click="clickBox2('1')" class="disabledBox">

          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/ysc.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">长管拖车输氢</div>  
          </div>
    
        </div>
            
        <div id="htsDiv2" @click="clickBox2('2')" class="disabledBox">
          
          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 70px;margin-top: 1vh;" src="../../assets/images/gdys.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">纯氢管道输氢</div>  
          </div>
        
        </div>

                
        <div id="htsDiv3" @click="clickBox2('3')" class="disabledBox">
          
          <div style="width: 100%;height: 9%;">
            <img style="height: 85px;height: 70px;margin-top: 1vh;" src="../../assets/images/zhkl.png">
          </div>

          <div style="width: 100%;height: 15%;margin-top: 9vh;">
            <div class="titleCss">综合考虑两种输氢方式</div>   
          </div>
        
        </div>

      </div>
    </div>

    <div style="text-align: left;width: 50%;">
      <el-form ref="form" label-position="right"  :model="form" label-width="130px">
        <el-form-item label="项目运行周期：">
          <el-input style="width: 30%;" v-model="form.operatingCycle">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

        


      
       
  </div>


  
  <div>
      <el-button type="primary" v-if="this.calculationStatus!='1'" @click="savePageData()" style="width: 110px">
        <span class="button-text">保存</span>
      </el-button>
  </div>

</div>
  
</template>

<script>
  export default {
    name: 'hydrogenProductionPathway',
    data() {
      return {
        form: {
          id:"",
          projectId : "",
          supplyType:"",
          transportType:"",
          operatingCycle:"",
        },
        projectId : "",
        activeDate: '',
        type: '',
        dataType : "",
        calculationStatus : ""

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
       
      this.form.projectId = this.projectId;
      this.queryCalculateInfo();
      this.queryPageData();
    },
    methods: {

      
      queryCalculateInfo : function(){

        var vm = this;
        var schemeId = ""; 

        this.$http.post('/iepsapi/ea/algorithm/queryCalculateInfo?schemeId='+schemeId+"&tableName=htp_algorithm_info"+"&projectId="+this.projectId).then((res) => {
          var result = res.data.data;
          if(result){
            vm.calculationStatus = result.calculationStatus;
          }else{
            vm.calculationStatus = '0';
          }
        }).catch((error) => {
          console.log(error);
        });


      }, 

      clickBox:function(dataType){

        if(this.calculationStatus != '1'){

          this.form.supplyType = dataType;

          for(var i = 1;i<=3;i++){
            $("#hppDiv"+i).attr("class","disabledBox");
          }
          $("#hppDiv"+dataType).attr("class","box");

        }

      },

      
      clickBox2:function(dataType){

        if(this.calculationStatus != '1'){

          this.form.transportType = dataType;

          for(var i = 1;i<=3;i++){
            $("#htsDiv"+i).attr("class","disabledBox");
          }
          $("#htsDiv"+dataType).attr("class","box");

        }

      },

      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=ht_scheme_selection").then((res) => {
          var result = res.data.data;
          if(result){
            vm.form = result;

            var supplyType = vm.form.supplyType;
            var transportType = vm.form.transportType;


            for(var i = 1;i<=3;i++){
              $("#hppDiv"+i).attr("class","disabledBox");
            }
            $("#hppDiv"+supplyType).attr("class","box");

            for(var i = 1;i<=3;i++){
              $("#htsDiv"+i).attr("class","disabledBox");
            }
            $("#htsDiv"+transportType).attr("class","box");

          }
        }).catch((error) => {
          console.log(error);
        });


      },
      savePageData : function(){
 
        var vm = this;
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/saveSchemeSelection?projectId='+this.projectId, {
          "pageData": JSON.stringify(this.form),
        
          "tableName":"ht_scheme_selection"
        }).then((res) => {
        
          if (res.data.flag) {
            vm.form.id = res.data.id;
            this.$message({
              type: 'success',
              message: res.data.message
            });

          } else {
            this.$message.error(res.data.message);
          }
        });

      },
    
    }
  }
</script>



<style>
  /deep/.el-input.is-disabled .el-input__inner {
      background-color: #4c5b7182;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
  }
  /deep/ .el-form-item {
      margin-bottom: 5px;
  }
  /deep/ .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  /deep/.el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/.el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 
    
  .titleDiv {
    width: 100%;
    margin: 0.5vh;
    height: 2.5vh; 
    font-weight: bold; 
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 2vh;
    color: #f2f2f2;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .barColorBox {
    height: 2.5vh;
    width: 0.7vh;
    border-radius: 1px;
    display: inline-block;
    vertical-align: text-bottom;
    border: none;
    box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
    background-color: #FAFAFA;
    background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
    background-image: -o-linear-gradient(top,#17b4db,#07c968);
    background-image: -ms-linear-gradient(top,#17b4db,#07c968);
    background-image: linear-gradient(top,#17b4db,#07c968);
    background-repeat: repeat-x;
  }

  .titlefont {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
  }



  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .disabledBox{
    width: 31vh;
    height: 15vh;
    margin: auto;
    border-radius: 4px;
    background: #1d244994;
    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
  .box{
    width: 31vh;
    height: 15vh;
    margin: auto; 
    border-radius: 4px; 
    background-image: linear-gradient(to bottom, #2946ad, #61dde37a);

    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
 
  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
